<template>
  <div class="h-full" style="display: flex">
    <div class="pageNav" :class="{hide: isCollapse}">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
      <el-tooltip :content="isCollapse?'展开菜单':'收起菜单'" placement="right">
        <div class="switchCollapse" @click="switchCollapse">
          <i class="el-icon-arrow-right"></i>
          <i class="el-icon-arrow-left"></i>
        </div>
      </el-tooltip>
      <div class="pageNav-bar">
        <div class="pageNav-out">
          <el-scrollbar class="pageNav-inner">
            <el-menu :router="true"
                     :default-active="'/analysis/analysis-index/' + $store.state.ra"
                     :collapse="isCollapse"
                     @open="handleOpen"
                     @close="handleClose"
                     background-color="rgba(0, 0, 0, 0.06)"
                     text-color="rgba(255, 255, 255, 0.7)"
                     active-text-color="#fff">
              <el-submenu v-for="(item,index) in router.analysis" :index="''+index">
                <template slot="title">
                  <svg-icon :icon-class="item.icon" />
                  <span v-if="!isCollapse" slot="title">{{ item.title }}</span>
                </template>
                <el-menu-item v-for="it in item.list" :index="'/analysis/analysis-index/' + it.url">{{ it.title }}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="routerBox" :class="{left:isCollapse}">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="$route.fullPath"/>
      </transition>
    </div>
  </div>
</template>

<script>
  import Breadcrumb from '@/components/Breadcrumb'
  export default {
    components: {
      Breadcrumb
    },
    data() {
      return {
        isCollapse: true,
        router: this.$store.getters.router
      }
    },
    methods: {
      switchCollapse() {
        this.isCollapse = !this.isCollapse
      },
      handleOpen(key, keyPath) {

      },
      handleClose(key, keyPath) {
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .switchCollapse {
    position: absolute;
    z-index: 2;
    right: -18px;
    bottom: 50%;
    width: 18px;
    height: 34px;
    background: #0E3567;
    display: flex;
    align-items: center;
    border: rgba(255, 255, 255, 0.05) 1px solid;
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
    border-left-color: transparent;
    cursor: pointer;
    color: #fff;
    &.left{
      background: red;
    }
    &:hover{
      background: #0E447B;
    }
  }
  .pageNav{
    .el-icon-arrow-left{
      display: block;
    }
    .el-icon-arrow-right{
      display: none;
    }
    &.hide{
      .el-icon-arrow-left{
        display: none;
      }
      .el-icon-arrow-right{
        display: block;
      }
    }
  }

  .routerBox{
    height: 100%;
    width: calc(100% - 200px);
    overflow: hidden;
    transition: width .28s;
    &.left{
      width: calc(100% - 44px);
    }
  }
  .breadcrumb-container{
    position: absolute;
    z-index: 99;
    top: 5px;
    left: calc(100% + 30px);
    width: 900px;
  }
</style>
